<template>
  <div class="form-domain">
    <FormDesignSection title="主表单字段">
      <field-list @selectedChange="id => $emit('selectedChange', id)"
                  :canRemove="canRemoveMainField"
                  @removed="() => $emit('removed')" field-role="field-definition"
                  :selected-field="selectedField" v-model="formDefinition.fields"/>
    </FormDesignSection>

    <template v-for="subForm in formDefinition.subForms">
      <FormDesignSection :subFormId="subForm.id" :title="subForm.formName" title-role="sub-form-definition">
        <template #more>
          <div style="padding-right: 10px">
            <a-dropdown :trigger="['click']">
              <a-button icon="setting" shape="circle" size="small"/>
              <a-menu slot="overlay">
                <a-menu-item @click="() => removeSubForm(subForm)">
                  <a href="javascript:;">
                    <a-icon class="form-domain-action-icon" type="delete"/>
                    删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </template>
        <field-list @selectedChange="id => $emit('selectedChange', id)"
                    @removed="() => $emit('removed')" field-role="field-definition"
                    :selected-field="selectedField" v-model="subForm.fields"/>
      </FormDesignSection>
    </template>

    <a-modal title="系统提示" @ok="() => messageBoxVisible = false"
             @cancel="() => messageBoxVisible = false" :width="800"
             okText="确定" cancelText="取消" :visible="messageBoxVisible">
      <span class="iconfont" style="color: #ffb306">&#xe9d6;</span> 字段删除失败
      <h-table :data-source="messages" :pagination="false"
               :configurable="false" select="false" :columns="columns"/>
    </a-modal>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import FormDesignSection from '@/components/hhd/design/FormDesigner/FormDesignSection/FormDesignSection.vue';
import FieldList from '@/components/hhd/design/FormDesigner/field/FieldList.vue';
import HTable from '@/components/hhd/design/HTable/HTable.vue';

export default {
  name: 'FieldDomain',
  components: {HTable, FieldList, FormDesignSection},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    selectedField: createProps(String),
  },
  data() {
    return {
      columns,
      messages: [],
      messageBoxVisible: false,
    };
  },
  methods: {
    canRemoveMainField(field) {
      let menus = this.formDefinition.menus || [];
      let messages = [];
      console.log(field)
      menus.forEach(menu => {
        let orderFields = menu.orderFields || [];
        let searchFields = menu.searchFields || [];
        let searchQuerys = menu.searchQuerys || [];
        let showFields = menu.showFields || [];
        let list = [...orderFields, ...searchFields, ...searchQuerys, ...showFields];
        let index = list.findIndex(f => f.fieldId === field.id);
        if (index !== -1) {
          messages.push({
            fieldLabel: field.label,
            message: '该字段参与了业务列表的列表显示项, 自定义查询项, 排序项, 或者操作范围项, 不能删除!'
          });
        }
      });

      if (messages.length) {
        this.showMessages(messages);
        return false;
      }
      return true;
    },
    showMessages(messages) {
      this.messages = messages;
      this.messageBoxVisible = true;
    },
    removeSubForm(subForm) {
      this.$confirm({
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.formDefinition.subForms = this.formDefinition.subForms.filter(s => s !== subForm);
          this.$emit('removed');
        }
      });
    },
  }
};

const columns = [
  {
    width: 50,
    title: '序号',
    customRender: (text, record, index) => {
      return (index + 1) + '';
    }
  },
  {
    width: 100,
    title: '数据域名称',
    dataIndex: 'fieldLabel'
  },
  {
    title: '失败原因',
    dataIndex: 'message',
  }
];
</script>